<template><div><h1 id="工具网站" tabindex="-1"><a class="header-anchor" href="#工具网站" aria-hidden="true">#</a> 工具网站</h1>
<p>这里收藏的是一些前端比较实用的网站和工具库。</p>
<h2 id="animate动画库" tabindex="-1"><a class="header-anchor" href="#animate动画库" aria-hidden="true">#</a> <a href="http://www.animate.net.cn/" target="_blank" rel="noopener noreferrer">Animate动画库<ExternalLinkIcon/></a></h2>
<ul>
<li>网址：<a href="http://www.animate.net.cn/" target="_blank" rel="noopener noreferrer">http://www.animate.net.cn/<ExternalLinkIcon/></a></li>
<li>描述：这是一个开源免费并且可在线预览演示的前端动画库。在前端开发过程中经常会使用到一些动画，而这个动画库是纯css动画库，在这个动画库中几乎可以找到你所需要的任何类型的动画。</li>
</ul>
<h2 id="贝塞尔曲线在线生成" tabindex="-1"><a class="header-anchor" href="#贝塞尔曲线在线生成" aria-hidden="true">#</a> <a href="https://cubic-bezier.com/" target="_blank" rel="noopener noreferrer">贝塞尔曲线在线生成<ExternalLinkIcon/></a></h2>
<ul>
<li>网址：<a href="https://cubic-bezier.com/" target="_blank" rel="noopener noreferrer">https://cubic-bezier.com/<ExternalLinkIcon/></a></li>
<li>描述：这是一个可以在线生成生成和调试贝塞尔曲线的网址。在前端开发过程中经常会使用动画，而设置动画的animation-timing-function属性是规定动画的速度曲线的，animation-timing-function的cubic-bezier(n,n,n,n)值，则是运行您在三次贝塞尔函数中定义自己的动画运动速度曲线。</li>
</ul>
<h2 id="swiper轮播图" tabindex="-1"><a class="header-anchor" href="#swiper轮播图" aria-hidden="true">#</a> <a href="https://www.swiper.com.cn/" target="_blank" rel="noopener noreferrer">Swiper轮播图<ExternalLinkIcon/></a></h2>
<ul>
<li>网址：<a href="https://www.swiper.com.cn/" target="_blank" rel="noopener noreferrer">https://www.swiper.com.cn/<ExternalLinkIcon/></a></li>
<li>描述：<a href="https://www.swiper.com.cn/" target="_blank" rel="noopener noreferrer">Swiper<ExternalLinkIcon/></a> 是一款免费以及轻量级的移动设备触控滑块的js框架。<a href="https://www.swiper.com.cn/" target="_blank" rel="noopener noreferrer">Swiper<ExternalLinkIcon/></a> 完全免费并开源的。你可以在网站上预览各种轮播效果。而且它不仅提供了非常丰富的api，还支持各种前端框架，比如Vue、react。</li>
</ul>
<h2 id="按钮" tabindex="-1"><a class="header-anchor" href="#按钮" aria-hidden="true">#</a> <a href="https://www.cssbuttongenerator.com/" target="_blank" rel="noopener noreferrer">按钮<ExternalLinkIcon/></a></h2>
<ul>
<li>网址：<a href="https://www.cssbuttongenerator.com/" target="_blank" rel="noopener noreferrer">https://www.cssbuttongenerator.com/<ExternalLinkIcon/></a></li>
<li>描述：按钮在前端开发中是随处可见的，但是当没有UI设计师的时候，按钮要做成什么样子，绝对是每一位前端工作者的噩梦。而这个网站内置了很多按钮，可以在线调试出自己喜欢的按钮样式，并在线生成css代码。</li>
</ul>
<h2 id="零代码工具" tabindex="-1"><a class="header-anchor" href="#零代码工具" aria-hidden="true">#</a> <a href="https://lingdaima.com/" target="_blank" rel="noopener noreferrer">零代码工具<ExternalLinkIcon/></a></h2>
<ul>
<li>网址：<a href="https://lingdaima.com/" target="_blank" rel="noopener noreferrer">https://lingdaima.com/<ExternalLinkIcon/></a></li>
<li>描述：零代码工具库是一个在线生成前端代码的工具网站，里面拥有各种小工具，可以节省许多开发时间。比如网格布局、css阴影效果、css文字排版、css颜色渐变、按钮、卡片等等</li>
</ul>
<h2 id="加载动画" tabindex="-1"><a class="header-anchor" href="#加载动画" aria-hidden="true">#</a> <a href="https://loading.io/" target="_blank" rel="noopener noreferrer">加载动画<ExternalLinkIcon/></a></h2>
<ul>
<li>网址：<a href="https://loading.io/" target="_blank" rel="noopener noreferrer">https://loading.io/<ExternalLinkIcon/></a></li>
<li>描述：这是一个专注于加载动画的网站，里面包含了丰富的加载动画。动画的下载支持多种图片格式下载，如GIF、SVG、PNG，也支持获取css代码，也支持在线调试。但并非完全免费。</li>
</ul>
</div></template>


